import {connect} from 'react-redux';
import {View, Text} from '@tarojs/components';
import {AtIcon, AtButton} from 'taro-ui';
import Taro from "@tarojs/taro";
import './index.less'

function Wallet(props) {
  const {dispatch, balance, integral} = props;
  return (
    <View>
      <View className='walletWrap'>
        <View>
          <AtIcon prefixClass='icon' value='licai' size='50' color='#0091FF' />
        </View>
        <View className='money'>
          <View className='moneyLeft'>
            <View>
              <AtIcon prefixClass='icon' value='tixian' size='16' color='#FA6400' />&nbsp;
            </View>
            <View>
              钱包余额
            </View>
          </View>
          <View className='moneyRight'>
            ¥{balance.toFixed(2)}
          </View>
        </View>
        <View className='integral'>
          <View  className='moneyLeft'>
            <View>
              <AtIcon prefixClass='icon' value='jifen' size='16' color='#FA6400' />&nbsp;
            </View>
            <View>
              当前积分
            </View>
          </View>
          <View className='moneyRight'>
            {integral}
          </View>
        </View>
        {/*<View>总金额(元)</View>*/}
      </View>
      <View className='walletFooter'>
        <View className='chargeBtn'>
          <AtButton onClick={() => Taro.navigateTo({url: '/moduleB/pages/wallet/recharge'})}>余额充值</AtButton>
        </View>
        {/*<View className='integralBtn'>*/}
        {/*  <AtButton onClick={() => Taro.navigateTo({url: '/moduleB/pages/wallet/IntegralRecharge'})}>积分购买</AtButton>*/}
        {/*</View>*/}
        <View className='withdrawBtn'>
          <AtButton onClick={() => Taro.navigateTo({url: '/moduleB/pages/wallet/withdraw'})}>余额退款</AtButton>
        </View>
        <View onClick={() => {
          dispatch({
            type: 'recharge/setState',
            payload: {
              current: 0
            }
          })
          Taro.navigateTo({url: '/moduleA/pages/trade/index'})
        }}
        >充值记录</View>
      </View>
    </View>
  )
}

function mapStateToProps({wallet = {}}) {
  return {
    ...wallet
  }
}

export default connect(mapStateToProps)(Wallet)
